<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            font-size: 20px;
        }
        p{
            width: 100%;
            height: 50px;
            background-color: aquamarine;
            /*
            计算公式：1/父级的font-size*需要转换的像素值=em的值
                12/20=0.6em    相当于12px
            */
            font-size: 0.6em;
        }
        h2{
            width: 100%;
            height: 100px;
            background-color: beige;
            margin-top: 20px;
            font-size:1em;
        }
        span{
            /*
            12/20=1em
            */
            background-color: orchid;
            font-size: 0.6em;
        }
    </style>
</head>
<body>
   <!--
      em：相对单位，跟百分比一样，都是相对于父级做判断
      1em=16px;
   -->
  <div>
      这是外层盒子的文字
       <p>这是一个段落</p>
       <h2>
           这是一个标题
           <span>这是一个副标题</span>
       </h2>
  </div>
</body>
</html>